<template>
	<view class="content">
		<view class="sheet" :class="{ sheetShow: isShowBottom, sheeHide: !isShowBottom }" @touchmove.stop.prevent="moveHandle" @click="closeSheet()">
			<scroll-view scroll-y="true" class="sheetView" :class="{ sheetView_active: isShowBottom }" @click.stop="stopEvent()">
				<view class="end-title">
					<view @tap="change(0)" :class="{ btna: btnnum == 0 }">退票方式</view>
					<view @tap="change(1)" :class="{ btna: btnnum == 1 }">服务费</view>
					<view @tap="change(2)" :class="{ btna: btnnum == 2 }">儿童票</view>
				</view>
				<view class="end-cont" :class="{ dis: btnnum == 0 }">
					<!-- <text class="support" >{{supports === true ? "该车站支持在线退票":"该车站不支持在线退票"}}</text> -->
					<!-- <text class="support" v-if="supports == 'true'">该车站支持在线退票，</text> -->
					若车站不支持在线退票，退票需要到始发车站窗口办理。（注：所有车站均不支持改签业务）
					<view class="">{{ hint.question1 }}</view>
					<view class="">{{ hint.question2 }}</view>
					<view class="">{{ hint.question3 }}</view>
				</view>
				<view class="end-cont" :class="{ dis: btnnum == 1 }">{{ hint.question4 }}</view>
				<view class="end-cont" :class="{ dis: btnnum == 2 }">{{ hint.question5 }}</view>
			</scroll-view>
		</view>
	</view>
</template>
<script>
export default {
	name: 'bottomSheet',
	props: {
		isShowBottom: Boolean,
		hint: {},
		supports:''
	},
	data() {
		return {
			btnnum: 0
		};
	},
	methods: {
		closeSheet() {
			this.$emit('closeBottom');
		},
		stopEvent() {
			//@click.stop防止事件冒泡
		},
		moveHandle() {
			//不让页面滚动
		},
		change(e) {
			// console.log(123);
			this.btnnum = e;
			// console.log(this.btnnum);
		}
	}
};
</script>

<style scoped>
/* sheet弹窗 */
.sheet {
	width: 100%;
	height: 100%;
	position: fixed;
	top: 120%;
	left: 0upx;
	bottom: 0upx;
	right: 0upx;
	/* background: rgba(0, 0, 0, 0.3); */
	z-index: 10000;
}

/* 显示时候的动画默认0.5s */
.sheetView {
	width: 100%;
	height: 0upx;
	position: absolute;
	bottom: 0upx;
	background: white;
	z-index: 10001;
	transition: all 0.5s;
	border-radius: 13upx;
}
.sheetShow {
	top: 0upx !important;
}
/* 关闭时的动画，时间自己可以设置0.5s*/
.sheeHide {
	top: 120% !important;
	transition: all 0.5s;
}

/* 项目需求根据设计稿要展示的高度,超出这个高度就自动滚动*/
.sheetView_active {
	height: 760upx;
}

/* 将三个内容view的display设置为none(隐藏) */
.end-title {
	display: flex;
	height: 70upx;
	line-height: 70upx;
	border-bottom: 1px solid #cccccc;
}
.end-title view {
	flex-grow: 1;
	text-align: center;
}
.end-cont {
	display: none;
}
.btna {
	color: #00a0ff;
}
.dis {
	display: block;
	padding: 30upx 20upx 100upx 20upx; 
}
.support {
	color: #007aff;
}
</style>
